/**
 *  If you want to override some bootstrap variables, you have to change values here.
 *  The list of variables are listed here bower_components/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
 */
$navbar-inverse-link-color: #5AADBB;
$icon-font-path: "../../bower_components/bootstrap-sass/assets/fonts/bootstrap/";
@import "./mixin.scss";
/**
 *  Do not remove the comments below. It's the markers used by wiredep to inject
 *  sass dependencies when defined in the bower.json of your dependencies
 */
// bower:scss
// endbower
body{
    color:#2a2c36;
}
.navbar{
    height:90px;
    border-bottom:1px solid #eee;
    background-color:#fff;
    .container{
        display: flex;
        box-sizing: border-box;
        flex-direction: row;
        justify-content: space-between;
        position: relative;
        z-index:2;
        background-color:#fff;
        .box-btn{
            margin:10px 15px;
            padding-top:10px;
            border-right:1px solid #f0f2f7;
        }
        .navbar-btn{
            position: relative;
            float: right;
            margin-right: 15px;
            padding: 9px 10px;
            margin-top: 8px;
            margin-bottom: 8px;
            background-color: transparent;
            background-image: none;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        .navbar-btn .icon-bar{
            display: block;
            width: 22px;
            height: 2px;
            border-radius: 1px;
            background-color: #2a2c36
        }
        .navbar-btn .icon-bar + .icon-bar {
            margin-top: 4px;
        }
        .box-brand{
            display: flex;
            align-items: center;
            justify-content: center;
            h1{
                font-size:1.5rem;
            }
        }
        .box-nav{
            list-style: none;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding:0;
            margin:0 0 0 10px;
            flex:1 1 auto;
            li{
                margin:auto 10px;
            }
            opacity: 1;
            transition: opacity 0.5s;
        }
        .box-right{
            display: flex;
            align-items: center;
            justify-content: center;
            text-align:right;
            opacity: 1;
            transition: opacity 0.5s;
        }
    }

    .box-memu{
        /*display: flex;*/
        position: relative;
        z-index:1;
        /*top:0;*/
        left:0;
        width:100%;
        height:0;
        background-color:rgba(0,0,0,0.3);
        &:before,&:after{
            display: block;
            content:' '
        }
    }
    .ul-nav{
        position: absolute;
        left:0;
        width:100%;
        background-color: #fff;
        list-style: none;
        padding:0;
        margin:0;
        /*border-bottom:2px solid #ddd;*/
        li{
            
            border-top:1px solid #eee;
            a{
                display: block;
                min-height: 44px;
                padding:12px 34px;
                box-sizing: border-box;
            }
        }
        transform: translate(0,-100%) translateZ(0);
        transition: all 0.5s;
    }
}
.mini-hide{
    .ul-nav{
        transform: translate(0,-100%) translateZ(0);
    }
}
.mini-show{
    .ul-nav{
        transform: translate(0,0) translateZ(0);
    }
}

.footer{
    margin-top:100px;
    border-top:1px solid #eee;
    .container{
        height:80px;
        display: flex;
        // justify-content: center;
        align-items: center;
    }
}



.titlebar{
  border-bottom:1px solid #eee;
  margin-bottom:10px;
}
.titlebar .right{
  padding-top:20px;
  padding-bottom:10px;
  text-align:right;
}
.red{
  color:#ee0000;
}


.table th,.table td,.modal-body,.break{
    word-break:break-all;
    word-wrap:break-word;
}


.btn-white{
    background-color: #fff;
}
.banner-home{
    background-color:#85b648;
    height: 320px;
    .container{
        color:#fff;
        h1{
            margin-top:100px;
        }
    }
    .btn-white{
        color:#2a2c36;
        width:120px;
    }
}


/**
 *  Do not remove the comments below. It's the markers used by gulp-inject to inject
 *  all your sass files automatically
 */
// injector
// endinjector


@media (max-width: 579px) {
    .navbar{
        .container{
            .box-nav,.box-right{
                opacity:0;
            }
        }
        .ul-nav{
            opacity: 1;
        }
    }
}
@media (min-width: 580px) {
    .navbar{
        .container{
            .box-nav,.box-right{
                opacity:1;
            }
        }
        .ul-nav{
            opacity: 0;
        }
    }
}
